<template>
  <div class="InvoiceClip">

    <mt-navbar v-model="selected">
      <mt-tab-item id="todo">待处理</mt-tab-item>
      <mt-tab-item id="finish">已完成</mt-tab-item>
    </mt-navbar>
    
<form action="" v-on:submit.prevent="">
    <mt-search v-model="value" @change.native="searchChange"></mt-search>    
</form>

    <mt-tab-container v-model="selected" class="overStyle"  :style="{height:heightVal+'px'}">
      <mt-tab-container-item id="todo">
      <img src="../assets/暂无数据.png" style="margin:40px 0 15px 0" v-if="invoiceArray.length==0?true:false">
      <p v-if="invoiceArray.length==0?true:false" style="margin:0 auto;color:#979797">暂时没有数据</p>
      <mt-loadmore  class="content" :bottom-method="loadBottom" v-if="invoiceArray.length==0?false:true"   :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
        <div class="item" v-for="(item,index) in invoiceArray.length" :key="index" @click="particularsCheck(invoiceArray[index])">
          <mt-cell-swipe
          :right="[
            {
              content: '删除',
              style: { background: '#F85D70', color: '#fff',height:'87px',width:'80px',lineHeight:'87px' },
              handler: () => deleteBtnClick(invoiceArray[index].id)
            } 
          ]">
          <div class="itemCon">
              <div class="title">
                  <span v-if="invoiceArray[index].invoiceType == '01'"  class="borderGules"></span>
                  <span v-if="invoiceArray[index].invoiceType == '01'"  style="fontSize:11px;">专</span>
        
                  <span v-if="invoiceArray[index].invoiceType == '04'||invoiceArray[index].invoiceType == '10'"  class="borderOrange"></span>
                  <span v-if="invoiceArray[index].invoiceType == '04'||invoiceArray[index].invoiceType == '10'"  style="fontSize:11px;">普</span>

                  <span  v-if="invoiceArray[index].invoiceType == '11'" class="borderBlue"></span>
                  <span v-if="invoiceArray[index].invoiceType == '11'"  style="fontSize:11px;">卷</span>
                  
                  <span  v-if="invoiceArray[index].invoiceType == '14'||invoiceArray[index].invoiceType == 'T1'" class="borderGreen"></span>
                  <span v-if="invoiceArray[index].invoiceType == '14'||invoiceArray[index].invoiceType == 'T1'"  style="fontSize:11px;">通</span>

                <span>{{invoiceArray[index].buyerName}}</span>
              </div>
              <div class="item_content">
                <div class="left">
                  <span>开票日期：</span>
                  <span>{{invoiceArray[index].invoiceDate}}</span>
                </div>
                <div class="right">
                  <span>税价合计：</span>
                  <span style="color:#E51C23">￥{{invoiceArray[index].totalAmount}}</span>
                </div>
              </div>
          </div>
          </mt-cell-swipe>
        </div>
      </mt-loadmore>
      </mt-tab-container-item>

      <mt-tab-container-item id="finish">
      <img src="../assets/暂无数据.png" style="margin:40px 0 15px 0" v-if="invoiceArray.length==0?true:false">
      <p v-if="invoiceArray.length==0?true:false" style="margin:0 auto;color:#979797">暂时没有数据</p>
      <mt-loadmore  class="content" :bottom-method="FinishLoadBottom"  v-if="invoiceArray.length==0?false:true"  :bottom-all-loaded="FinishAllLoaded" :auto-fill="false" ref="loadmoreFinish" >
          <div class="item" v-for="(item,index) in invoiceArray.length" :key="index" @click="particularsCheck(invoiceArray[index])" >
            <div class="itemCon">
                <div class="title">
                  <span v-if="invoiceArray[index].invoiceType == '01'"  class="borderGules"></span>
                  <span v-if="invoiceArray[index].invoiceType == '01'"  style="fontSize:11px;">专</span>
        
                  <span v-if="invoiceArray[index].invoiceType == '04'||invoiceArray[index].invoiceType == '10'"  class="borderOrange"></span>
                  <span v-if="invoiceArray[index].invoiceType == '04'||invoiceArray[index].invoiceType == '10'"  style="fontSize:11px;">普</span>

                  <span  v-if="invoiceArray[index].invoiceType == '11'" class="borderBlue"></span>
                  <span v-if="invoiceArray[index].invoiceType == '11'"  style="fontSize:11px;">卷</span>
                  
                  <span  v-if="invoiceArray[index].invoiceType == '14'||invoiceArray[index].invoiceType == 'T1'" class="borderGreen"></span>
                  <span v-if="invoiceArray[index].invoiceType == '14'||invoiceArray[index].invoiceType == 'T1'"  style="fontSize:11px;">通</span>

                  <span>{{invoiceArray[index].buyerName}}</span>
                </div>
                <div class="item_content">
                  <div class="left">
                    <span>开票日期：</span>
                    <span>{{invoiceArray[index].invoiceDate}}</span>
                  </div>
                  <div class="right">
                    <span>税价合计：</span>
                    <span style="color:#E51C23">￥{{invoiceArray[index].totalAmount}}</span>
                  </div>
                </div>
            </div>
          </div>
        
      </mt-loadmore>

      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import axios from "axios";
import { Button, Toast } from "mint-ui";
import Bus from '@/bus.js'
import { MessageBox } from 'mint-ui';
import { Loadmore } from 'mint-ui';

export default {
  data() {
    return {
      heightVal: "",
      pageNo:1,
      selected: "finish",
      invoiceArray:[],
      examineData:{},
      //userId:'',
      allLoaded:false,
      FinishAllLoaded:false,
      value:'',
      invoiceData:[
        {
          apiType: "CYFP",
          blueInvoiceCode: "",
          blueInvoiceNo: "深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司",
          buyerAcount: "深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司",                             //购方开户行及账号
          buyerAddressPhone: "",                      //购方地址、电话
          buyerName: "深圳爱校信息技术有限公司",     //购方名称
          buyerTaxNo: "91440300359819522L",          //购方税号 现在是 15/18 位
          cancellationMark: "N",
          checkCode: "49094899323312482677",       //校验码
          checkCount: "1",
          createAt: "2018-08-29 11:41:02",
          currentTaxPeriod: "",
          drawer: "",
          id: "146",
          invoiceAmount: "106.83",
          invoiceCode: "035021700111",           //发票代码 10 或 12 位
          invoiceDate: "20180302",               //开票日期 yyyyMMdd
          invoiceNo: "26891469",                //发票号码 8 位
          invoiceStatus: "",
          invoiceType: "03",
          jxfpDetailses: [ {
              detailAmount: "-11.97",          //金额 
              detailNo: "2",
              goodsName: "深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司",                  //货物名称
              goodsNum: "",
              id: "238",
              lx: "",
              num: "0",                       //数量
              removeStatus: "0",
              specificationModel: "",         //规格型号 
              taxAmount: "-2.03",             //税额 
              taxDetailAmount: "",            
              taxRate: "17%",                 //税率 正数如税率 17%，填写 17
              taxUnitPrice: "",
              txrqq: "",
              txrqz: "",
              unit: "",                      //计量单位 
              unitPrice: "0"                 //不含税单价
            },{
              detailAmount: "-11.97",          //金额 
              detailNo: "2",
              goodsName: "深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司",                  //货物名称
              goodsNum: "",
              id: "238",
              lx: "",
              num: "0",                       //数量
              removeStatus: "0",
              specificationModel: "",         //规格型号 
              taxAmount: "-2.03",             //税额 
              taxDetailAmount: "",            
              taxRate: "15%",                 //税率 正数如税率 17%，填写 17
              taxUnitPrice: "",
              txrqq: "",
              txrqz: "",
              unit: "",                      //计量单位 
              unitPrice: "0"                 //不含税单价
            } 
          ],
          machineNo: "661620001408",
          payee: "",
          remark: "订单号:72648287785,",                //备注
          salerAcount: "深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司",                              //销方开户行及账号
          salerAddressPhone: "深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司深圳爱校信息技术有限公司",                        //销方地址、电话
          salerName: "厦门京东东和贸易有限公司",        //销方名称
          salerTaxNo: "91350212MA34A9L25L",             //销方税号 真实税号是 15/18 位
          sfdbts: "",
          taxAmount: "18.17",
          totalAmount: "125.00",            
        }, 
      ],
      searchInfo:'',
    };
  },
  props:["userId",'activeChange'],
  
  created(){
    this.userId = this.userId;
    // this.getInvoiceList();
    this.heightVal = window.screen.availHeight - 130;
    // this.invoiceArray = this.invoiceData;
  },
  watch:{
    selected(newVal){
      this.pageNo = 1;
      this.FinishAllLoaded = false;
      this.allLoaded = false;
      this.invoiceArray=[];
      this.getInvoiceList();
    },
    activeChange(newVal){
      // console.log(newVal)
      if(newVal){
        this.selected= "todo";
      }
      // this.getInvoiceList();
    },
    examineData(){
      this.$emit('invoiceDataVal',this.examineData);
    },
    value(newVal){
      this.searchInfo = newVal;
     this.getInvoiceList();
    },
  },
  // beforeDestroy () {
  //     Bus.$emit('invoiceDataVal',this.examineData);
  // },
  methods: {
    particularsCheck(examine){
      this.$emit('invoiceDataVal',examine);
      // this.examineData = examine
      this.$router.push({path:'/InvoiceIdentification/info/'+this.userId});
    },
    loadBottom(){
      setTimeout(() => {
        this.pageNo = Number(this.pageNo)+1;
        this.getInvoiceList();
        // this.invoiceArray = this.invoiceArray.concat(this.invoiceData2);
        this.$refs.loadmore.onBottomLoaded();
      }, 1000);
    },
    FinishLoadBottom(){
      setTimeout(() => {
        this.pageNo = Number(this.pageNo)+1;
        this.getInvoiceList();
        // this.invoiceArray = this.invoiceArray.concat(this.invoiceData2);
        this.$refs.loadmoreFinish.onBottomLoaded();
      }, 1000);
    },
    showDeleteButton(){
      console.log('showDeleteButton')
    },
    clearLoop(){
      console.log('clearLoop')
    },
    touchend(){
      console.log('touchend')
    },
    
    searchChange(val){
      this.searchInfo = val;
     this.getInvoiceList();

    },
    
    
    
    getInvoiceList(){
        var self = this;
        axios({
          headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
          method: 'get',
          url: '/wechatInvoice/invoice/getInvoiceList.do',
          params: {
            data: (() => {
              let obj = {
                  userId:this.userId,     //用户id",
                  type:this.selected,     //finish表示获取已完成，todo表示获取待处理",
                  pageNo:this.pageNo,     //页码，从1开始",
                  searchInfo: this.searchInfo,

              }
              Object.assign(obj, this.searchObj)
              return JSON.stringify(obj);
            })()
          }
        }).then((rep) => {
          if(rep.data.status == '1'){
              self.invoiceArray = self.invoiceArray.concat(rep.data.data.invoiceArray);
          }else if(rep.data.msg == '已经到底了'){
              self.pageNo = Number(self.pageNo)-1;
              self.allLoaded = true;
              self.FinishAllLoaded = true;
              Toast({
                message: rep.data.msg,
                duration: 1000
              });
          }else{
            self.pageNo = Number(self.pageNo)-1;
            Toast({
              message: rep.data.msg,
              duration: 1000
            });
          }
        }, (rep) => { });
    },
    deleteSection(){
      console.log('shanchu')
    },
    deleteBtnClick(id){
      event.stopPropagation();
      console.log(id)
      // MessageBox('提示', '操作成功');
      // MessageBox({
      //   title: '提示',
      //   message: '确定删除此发票?',
      //   showCancelButton: true
      // });
      MessageBox.confirm('确定删除此发票?').then(action => {
        // console.log(action)
        if(action == 'confirm'){
          this.deleteBtn(id);
        }
      });
      // event.stopPropagation();
    },
    deleteBtn(id){
      var self = this;
          // Toast({
          //   message: '删除成功',
          //   iconClass: 'icon icon-success',
          //   duration: 1000
          // });
      axios({
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
        method: 'get',
        url: '/wechatInvoice/invoice/delInvoice.do',
        params: {
          data: (() => {
            let obj = {
                  id:id,     //发票id",
                  userId:this.userId,     //用户id",
            }
            Object.assign(obj, this.searchObj)
            return JSON.stringify(obj);
          })()
        }
      }).then((rep) => {
        if(rep.data.status == '1'){
          Toast({
            message: '删除成功',
            iconClass: 'icon icon-success',
            duration: 1000
          });
          self.pageNo = 1;
          self.invoiceArray=[];
          self.getInvoiceList();
        }else{
          Toast({
            message: '删除失败',
            duration: 1000
          });

        }
      }, (rep) => { });
    },
    // showDeleteButton() {
    //   clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
    //   this.Loop = setTimeout(function(){
    //     alert("长按");
    //   },1000);
    // },
    // clearLoop(){
    //   clearTimeout(this.Loop);
    // },
    // touchend(){
    //   clearTimeout(this.Loop);
    //   alert("点击")
    //   return false;
    // }
  },
  components: {
  },
  mounted() {
    // this.heightVal = window.screen.availHeight - 75;
  }
};
</script>

<style lang="less" scoped>
.InvoiceClip {
  overflow: auto;
}
.overStyle{
  overflow: auto;

}
.navbar {
  height: 45px;
  line-height: 45px;
  display: flex;
  left: 72px;
  color: #101010;
  font-size: 14px;
  font-family: Arial;
  width: 100%;
  padding-bottom: 5px;
  span {
    display: block;
    flex: 1;
    &:first-child {
      border-right: solid 1px #bbbbbb;
    }
  }
}
.content {
  background-color: #f2f3f5;
  // padding-top: 10px;
  overflow-y: auto;
  .item {
    // background-color: #fff;
    // width: 100%;
    // margin:0 auto;
    color: rgba(16, 16, 16, 1);
    // margin-bottom: 10px;
    margin-top: 10px;
    // font-size: 12px;
    // font-family: Arial;
    // margin-bottom: 10px;
    .itemCon{
        background-color: #fff;
        // width: calc(95px+100%);
        // margin:0 auto;
        width: 100%;
        color: rgba(16, 16, 16, 1);
        // font-size: 12px;
        // font-family: Arial;
        // margin-bottom: 10px;
        // margin-top: 10px;
        // margin-left: -10px;
        // position: relative;
        // left: -95px;
        font-size: 12px;
      .title {
        font-size: 13px;
        text-align: left;
        position: relative;
        padding-left: 30px;
        // left: -30px;
        height:43px;
        line-height: 43px;
        border-bottom: solid 1px #ECECEC;
        span:first-child{
          position: absolute;
          left: 0px;
          top: 0px;
          width:0;
          height:0;
          border-width:0 0 30px 30px;
          border-style:solid;
        }
        span:nth-child(2){
          position: absolute;
          left: 2px;
          top: -10px;
          z-index: 2;
          color:#fff;
        }
        .borderGules{
          border-color:transparent transparent transparent #F4585D;
        }
        .borderOrange{
          border-color:transparent transparent transparent #FF9800;
        }
        .borderBlue{
          border-color:transparent transparent transparent #7ABAFF;
        }
        
        .borderGreen{
          border-color:transparent transparent transparent #84CA45;
        }
        
        .deleteBtn{
          float:right;
          margin-top:10px;
          margin-right: 10px;
          height:26px;
          width: 55px;
        }
      }
      .item_content {
        display: flex;
        height:43px;
        // font-size: 12px;
        line-height: 43px;
        // left: -30px;
        .left {
          flex: 1;
        }
        .right {
          flex: 1;
        }
      }
    }
  }
}

.isActive {
  color: #409cff;
}
.mint-search{
  padding-top: 5px;
  height: 100%;
}
.mint-searchbar-inner{
height: 20px;
}

</style>
